
import {
    Await,
    useNavigate,
    Outlet, useOutlet,
    Route,
    Routes,
    useRoutes,
    useLocation, Navigate, createMemoryRouter,RouterProvider,
    MemoryRouter as Router,
    useResolvedPath,
    useParams
} from "react-router-dom";
import React from 'react';
import { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView, Image } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 50 : 5, margin: 10,
        backgroundColor: 'purple'
    },
    root: {
        flex: 1,
    },
    webView: {
        flex: 1,
    },
    link: {
        padding: 10,
        backgroundColor: 'lightblue',
    },
});

const Home = () => {
    const navigate = useNavigate();
    return (
        <View style={{backgroundColor:"green",height:100}}>

            <Text>Welcome to the home page!</Text>
            <Button title={`To events by navigate("/events")`} onPress={() => {
                navigate("/events/123");
            }} />
           
        </View>
    );
};

const CalendarEvent = () => {
    const navigate = useNavigate();
    const { id } = useParams();
    return (
        <View style={{backgroundColor:"blue",height:100}}>

            <Text>Welcome to the events page!</Text>
            <Text>{`----------ID=${id}-------------`}</Text>
            <Button title={`Back Home by navigate(-1)`} onPress={() => {
                navigate(-1);
            }} />
           
        </View>
    );
};

export function CreateMemoryRouterExample() {
    const FAKE_EVENT = { name: "test event" };
    ///漏油
    const routes = [
       {path:"/",element:<Home/>},
      {
        path: "/events/:id",
        element: <CalendarEvent />,
        loader: () => FAKE_EVENT,
      },
    ];
  
   ///initialEntries:历史漏油
    const memoryRouter = createMemoryRouter(routes, {
      initialEntries: ["/", "/events/123"],//
      initialIndex: 1,
    });
 
    

    return (<ScrollView style={styles.container}>

        <RouterProvider router={memoryRouter} />
    </ScrollView>);
}
export default CreateMemoryRouterExample;
